import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

import '../config/config.dart';
import '../services/screen_adapter.dart';
import '../services/user_service.dart';
import '../services/sign_service.dart';
import '../model/order_model.dart';

class OrderPage extends StatefulWidget {
  OrderPage({Key key}) : super(key: key);

  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {

  List _orderList = [];

  @override
  void initState() { 
    super.initState();
    _getListData();
  }

  _getListData() async{
    List userinfo = await UserService.getUserInfo();
    var tempJson = {
      'uid': userinfo[0]['_id'],
      'salt': userinfo[0]['salt']
    };
    var sign = SignService.getSign(tempJson);
    
    var api = '${Config.domain}api/orderlist?uid=${userinfo[0]['_id']}&sign=$sign';
    var response = await Dio().get(api);
    
    setState(() {
      _orderList = OrderModel.fromJson(response.data).result;
    });


  }

  /// 自定义商品列表组件
  List<Widget> orderItemWidget(orderItems) {
    List<Widget> tempList = [];
    for(var i=0;i<orderItems.length;i++) {
      tempList.add(
        Column(
          children: <Widget>[
            SizedBox(height: 10),
            ListTile(
              leading: Container(
                width: ScreenAdapter.width(120),
                height: ScreenAdapter.width(120),
                child: Image.network('${orderItems[i].productImg}', fit: BoxFit.cover)
              ),
              title: Text('${orderItems[i].productTitle}'),
              trailing: Text('x${orderItems[i].productCount}')
            ),
            SizedBox(height: 10),
          ]
        )
      );
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {

    ScreenAdapter.init();

    return Scaffold(
      appBar: AppBar(
        title: Text('我的订单')
      ),
      body: Stack(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: ScreenAdapter.height(60)),
            padding: EdgeInsets.all(ScreenAdapter.width(16)),
            child: ListView(
              children: _orderList.map((item) {
                return InkWell(
                  onTap: (){
                    Navigator.pushNamed(context, '/orderInfo');
                  },
                  child: Card(
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          title: Text('订单编号：${item.sId}', style: TextStyle(
                            color: Colors.black54
                          ))
                        ),
                        Divider(),
                        Column(
                          children: orderItemWidget(item.orderItem)
                        ),
                        ListTile(
                          leading: Text('合计：¥${item.allPrice}'),
                          trailing: FlatButton(
                            onPressed: (){

                            },
                            child: Text('申请售后', style: TextStyle(color: Colors.white)),
                            color: Colors.red,
                          ),
                        )
                      ]
                    )
                  )
                );
              }).toList()
            )
          ),
          /// 浮动导航需要把列表盖住，所以要放在列表的下边
          Positioned(
            top: 0,
            width: ScreenAdapter.width(750),
            height: ScreenAdapter.width(76),
            child: Container(
              width: ScreenAdapter.width(750),
              height: ScreenAdapter.width(76),
              color: Colors.white,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Text('全部', textAlign: TextAlign.center)
                  ),
                  Expanded(
                    child: Text('待付款', textAlign: TextAlign.center)
                  ),
                  Expanded(
                    child: Text('待收款', textAlign: TextAlign.center)
                  ),
                  Expanded(
                    child: Text('已完成', textAlign: TextAlign.center)
                  ),
                  Expanded(
                    child: Text('已取消', textAlign: TextAlign.center)
                  )
                ]
              )
            )
          )
        ]
      )
    );
  }
}